<template>
    <div>
      <div>
    <van-grid :column-num="3"  :gutter="10">
    <van-grid-item v-for="(value,item) in categories " :key="item" 
    icon="balance-list-o" 
    :text= categories[item].name
    @click="change(item)"
    />
    </van-grid>
    </div>
    <div>
     
  <van-card v-for="(s,index) in getbook" 
  :key="index"
  :title="getbook[index].name"
  :desc="getbook[index].author"
  :price="getbook[index].price"
  :thumb="getbook[index].img"
  @click="change1(getbook[index].id,index)"
>
<template #tags>
    <van-tag plain type="danger">{{categories[getbook[index].category].name}}</van-tag>
  </template>
  </van-card>
  <van-list v-model="loading" :finished="finished" finished-text="无了" @load="onLoad">
  </van-list>
  </div>
  </div>
    
</template>
<script>
import axios from "axios"
import network from "../network"
export default {
  name: "Home",
  data: function () {
    return {
      categories: [],
      getbook: [],
      allbook:[],
      loading:false,
      finished:false,
      category_id:[],
    };
  },

  created: function () {
    let self = this;
    network.get_category().then(function (response) {
      self.categories = response.data;
    });
    network.get_allbook().then(function(response1) {
      self.getbook = response1.data;
      self.allbook = response1.data;
    });
  },

methods:
{
  change(value)
  { 
    let self = this;
    self.category_id=value;
     if(value==0)
     {
         self.getbook=self.allbook;
     }
     else
     {
       network.get_books_by_category(value).then(function(response1) {
       self.getbook = response1.data;
     })
      // console.log(self.getbook);
     }
      
     
  },
  change1(id,index)
  {
     this.$router.push(`/newpage/${id}/${this.getbook[index].category}`);
     
     
  },
  onLoad()
  {
    this.loading = false;
    if(this.getbook.length>=60)
    {
      this.finished=true;
      
    }
  },
},

  
};
</script>